<template>
	<view class="page flexC-FS-C">
		<!--  :style="{marginTop:navBarHeight+'px'}" -->
		<div class="titleImg">
			<image :src="imagesYqgjUrl + 'title.png'" mode="widthFix" />
		</div>

		<div class="apps">
			<u-row customStyle="flex-flow: wrap;">
				<u-col :span="3" v-for="(item, index) in appsData" :key="index">
					<div class="flexC-FS-C mt40" @click="handleGoTo(item)">
						<image class="img" :src="item.imgUrl" mode="aspectFit" />
						<div class="title">{{item.title}}</div>
					</div>
				</u-col>
			</u-row>
		</div>

		<div class="titleImg">
			<image :src="imagesYqgjUrl + 'bottom.png'" mode="widthFix" />
		</div>

		<tabbar ref="tabBarRef" />
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	import config from '@/configs/index.js'
	import {
		getNavBarHeight
	} from "@/utils/system.js"

	export default {
		data() {
			return {
				navBarHeight: getNavBarHeight(),
				imagesYqgjUrl: config.IMAGES_URL_YQGJ,
				appsData: [{
						imgUrl: config.IMAGES_URL_YQGJ + '1.png',
						title: '报事报修',
						path: {
							isSubMenu: false,
							url: '/sub-repair/index'
						},
						tabBarType: 5
						/* wechtaApp: {
							appId: 'wx5b117718087811e6',
							path: "pages/home/index"
						},
						tabBarType: 1 */
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '2.png',
						title: '停车缴费',
						wechtaApp: {
							appId: 'wx3863f0d0347943f3',
							path: ""
						},
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '5.png',
						title: '访客管理',
						path: {
							isSubMenu: false,
							url: '/pages/visitor/index'
						},
						tabBarType: 2
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '11.png',
						title: '会议预定',
						path: {
							isSubMenu: true,
							url: '/sub-meeting/index'
						},
						tabBarType: 3
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '14.png',
						// title: '入住开办',
						title: '门禁管理',
						wechtaApp: {
							appId: 'wx8a47126bcd6dc182',
							path: ""
						},
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '3.png',
						title: '充电缴费',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '4.png',
						title: '物业缴费',
						path: {
							isSubMenu: true,
							url: '/sub-menu/property/fees'
						},
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '6.png',
						title: '订餐服务',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '7.png',
						title: '智能储物',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '8.png',
						title: '快递收发',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '9.png',
						title: '送水服务',
						path: {
							isSubMenu: true,
							url: '/sub-water/water'
						},
						tabBarType: 4
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '10.png',
						title: '共享办公',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '12.png',
						title: '家政服务',
						path: {
							isSubMenu: true,
							url: '/sub-menu/housekeeping/index'
						},
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '13.png',
						title: '电子商城',
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '15.png',
						title: '投诉建议',
						path: {
							isSubMenu: true,
							url: '/sub-menu/complaint/complaint'
						},
						tabBarType: 1
					},
					{
						imgUrl: config.IMAGES_URL_YQGJ + '16.png',
						title: '物业公告',
						path: {
							isSubMenu: true,
							url: '/sub-menu/notice/notice'
						},
						tabBarType: 1
					},
				]
			}
		},

		onShow() {
			this.$refs.tabBarRef.initTab();
		},

		mounted() {
			uni.setStorageSync("tabBarType", 1)
		},
		methods: {
			handleGoTo(item) {
				if (item.path || item.wechtaApp) {
					if (item.wechtaApp) {
						uni.navigateToMiniProgram({
							...item.wechtaApp,
							success(res) {
								// 打开成功
							}
						})
					} else {
						const access_token = uni.getStorageSync("access_token")

						if (!access_token) {
							uni.navigateTo({
								url: `/sub-mine/login/index`
							})
						} else {
							uni.setStorageSync("tabBarType", item.tabBarType)

							if (item.path) {
								if (item.path.isSubMenu) {
									uni.switchTab({
										url: item.path.url
									})
								} else {
									uni.navigateTo({
										url: item.path.url
									})
								}
							}
						}
					}
				} else {
					uni.showToast({
						title: '开发中，敬请期待',
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;

		.titleImg {
			width: 620rpx;
			height: 310rpx;
			margin-bottom: 20rpx;
		}

		.apps {
			margin: 20rpx 0;

			.img {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}

			.title {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
</style>